<template>
	<div class="m-25 mt-65">
		<div class="normal-box-mod">
			<div class="normal-box-hd clearfix">
				<div class="normal-box-title">
					<div class="decorate-square"></div>
					<h2>正确率对比</h2>
				</div>
			</div>
			<div class="normal-box-bd">
				<div class="normal-list-page-mod">

					<card>
						<div class="normal-list-page-hd clearfix">
							<Col span="5"  class="mr-10">
                <sele @ProvinceData="childByValue"></sele>
							</Col>

							年份：
							<Select v-model="queryData.year" class="mr-10" :clearable=flog style="width:100px" >
								<Option v-for="item in List.yearList" :value="item.id"  :key="item.id">{{item.name}}</Option>
							</Select>

							<Button size="small" class="mr-10" type="primary" custom-icon="iconfont icon-chaxun" @click='getTableData'>查询</Button>
						</div>
					</card>
					<div class="normal-list-page-bd">
						<Table border :loading="list.loading" :columns="list.columns" :data="list.tableData" @on-selection-change="selectionChange"></Table>
					</div>
					<div class="normal-list-page-ft clearfix">
						<Page class="fr" :total="queryData.totalRecord" :page-size="queryData.limit" :current="queryData.page"
						 @on-change="changePage"  show-total show-elevator ></Page>
					</div>
				</div>
			</div>
			<div id="cyl-biao">
				<five :five='this.five'></five>
			</div>
		</div>
	</div>
</template>
<script>
  import sele from "@/view/test/city.vue"
	import participatContrastApi from '@/api/RecordsCenter/participatContrast.js'
	import five  from "./components/five.vue";
	import {
		Message
	} from 'iview'

	export default {
		name: 'accuracy',
		components: {
      sele,
			five

		},
		data() {
			return {
				five:{

				},
				// 列表
				list: {
					loading: false,
					selections: [],
					// 列表展示数据
					tableData: [],
					// 表格表头
					columns: [{title: '区域	',align: 'center',key: 'areaName',width: 120},
						{title: '一月',align: 'center',key: 'january',minWidth: 100,},
						{title: '二月',align: 'center',key: 'february',minWidth: 100,},
						{title: '三月',align: 'center',key: 'march',minWidth: 100,},
						{title: '四月',align: 'center',key: 'april',minWidth: 100,},
						{title: '五月',align: 'center',key: 'may',minWidth: 100,},
						{title: '六月',align: 'center',key: 'june',minWidth: 100,},
						{title: '七月',align: 'center',key: 'july',minWidth: 100,},
						{title: '八月',align: 'center',key: 'august',minWidth: 100,},
						{title: '九月',align: 'center',key: 'september',minWidth: 100,},
						{title: '十月',align: 'center',key: 'october',minWidth: 100,},
						{title: '十一月',align: 'center',key: 'november',minWidth: 100,},
						{title: '十二月',align: 'center',key: 'december',minWidth: 100,},
					]
				},
				List: {
					yearList: [

						{id: 2021,name: "2021年"},
						{id: 2020,name: "2020年"},
						{id: 2019,name: "2019年"},
						{id: 2018,name: "2018年"},
						{id: 2017,name: "2017年"},
						{id: 2016,name: "2016年"},
						{id: 2015,name: "2015年"},
						{id: 2014,name: "2014年"},
						{id: 2013,name: "2013年"},
						{id: 2012,name: "2012年"},


					],
				},
				// 页面查询数据
				queryData: {
					provid: '',
					cityid: '',
					distid: '',
					strtid: '',
					commid: '',
					comminid: '',
					"type":"correct",
					 "year":2019,
					// year:'',
					limit: 5,
					page: 1,
					totalRecord: 0,
				}
			}
		},
    mounted () {
      let area = window.defArea
      this.queryData.provid = area[0]
      this.queryData.cityid = area[1]
      this.queryData.distid = area[2]
      this.getTableData();
    },
		methods: {
			// 获取列表
			getTableData() {
				const that = this
				// that.queryData.totalRecord = undefined
				that.list.loading = true
				participatContrastApi.getPageList(that.queryData)
					.then(res => {
						that.list.tableData = res.data.list
						that.five=res.data
						that.five.type='正确率'
						that.list.loading = false
						that.queryData.totalRecord = res.data.totals
						// that.queryData.page = res.data.page;
						// that.queryData.limit = res.data.pageSize
					})
					.catch(error => {
						Message.error(error)
					})
			},

			// 换页
			changePage(page) {
				this.queryData.page = page
				this.getTableData()
			},
      // 六级联动数据获取
      childByValue(data) {
        let area = this.queryData
        area.provid = data.provid||'';
        area.cityid = data.cityid||'';
        area.distid = data.distid||'';
        area.strtid = data.strtid||'';
        area.commid = data.commid||'';
        area.comminid = data.comminid||'';
      },
		},
	}
</script>
<style>
	#cyl-biao{
		width:100%;
		height:30vh;
	}
</style>
